<template>
  <!-- 物资采购计划-新增 -->
  <div class="e-form">
    <BillTop title="物资采购计划新增" @cancel="cancel"></BillTop>
    <div class="tabs">
      <div class="tabs-title">基本信息</div>
      <div style="width: 100%" class="form">
        <el-form
          :model="formData"
          :rules="rules"
          ref="formData"
          label-width="150px"
          class="demo-ruleForm"
          show-message
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="单据机构：">
                {{ formData.orgName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
                 <el-form-item label="计划日期：" prop="planDate">
                <el-date-picker
                  v-model="formData.planDate"
                  type="date"
                   :placeholder="geyDate()"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
                  <el-form-item label="币种：" prop="currency">
                <el-select
                  v-model="formData.currencyId"
                  placeholder="请选择"
                  @change="currencyChange"
                >
                  <el-option
                    v-for="item in currencyForm"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- <el-form-item label="税率%：" prop="taxRate">
                <el-input
                  placeholder="请填写"
                  v-model="formData.taxRate"
                   clearable
                             v-enter-float="{
                                    set: this,
                                    val: 'formData',
                                    key: 'taxRate'
                                }"
                ></el-input>
              </el-form-item> -->

            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="状态：" v-model="formData.state">
                {{ "草稿" }}
              </el-form-item>
            </el-col>
            <el-col :span="12"> </el-col>
          </el-row>
           <el-row>
            <el-form-item label="项目情况说明：">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formData.projectDescription"
              >
              </el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="备注：">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formData.remarks"
              >
              </el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="填报人：">{{
                formData.preparer
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="本位币：">
                  {{ formData.baseCurName }}
                </el-form-item>
              </el-col>
          </el-row>
           <el-row>
              <el-col :span="12">
                <el-form-item label="本位币汇率：">
                <span v-if="formData.baseCurRate === 1">  {{ formData.baseCurRate }}</span>
                <span v-else>
                  <el-input
                    placeholder="请输入本位币汇率"
                    v-model="formData.baseCurRate"
                  >
                  </el-input>
                    </span>
                </el-form-item>

              </el-col>
              <el-col :span="12">
                  <el-form-item label="计划金额(本位币)：">
                <span>{{ formData.rmbRate }}</span>
                </el-form-item>
                 </el-col>
            </el-row>
        </el-form>
      </div>
    </div>
    <div class="buttons">
      <span class="tip"
        ><span style="color: red; margin-right: 0">*</span>为必填项</span
      >
      <el-button
        type="primary"
        style="background: #2e61d7"
        @click="save('formData')"
        v-debounce
        >保存</el-button
      >

      <el-button @click="cancel()">取消</el-button>
    </div>
  </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import { mapState } from 'vuex'
// import request from '@/api/materials/plan.js'
import { getRmbRate } from '@/api/equip/common.js'
import API from '@/api/HouseVersionApi/materials/materialsPlan'
export default {
    data () {
        return {
            //表单数据
            formData: {
                'amount': 0,
                'baseCurAmount': 0,
                'baseCurId': '',
                'baseCurName': '',
                'baseCurRate': 0,
                'baseCurTaxAmount': 0,
                'baseCurTotalAmount': 0,
                'billId': '',
                'billNo': '',
                'currency': '',
                'currencyId': '',
                'easId': '',
                'founderId': '',
                'founderName': '',
                'gmtCreate': '',
                'gmtModified': '',
                'isQuote': 0,
                'lastChangeBillState': '',
                'nullifyCreated': '',
                'nullifyCreator': '',
                'nullifyCreatorId': '',
                'nullifyDescription': '',
                'nullifyReason': '',
                'orgId': '',
                'orgName': '',
                'planDate': '',
                'preparer': '',
                'preparerId': '',
                'remarks': '',
                'rmbAmount': 0,
                'rmbId': '',
                'rmbName': '',
                'rmbRate': 0,
                'rmbTaxAmount': 0,
                'rmbTotalAmount': 0,
                'settledAmount': 0,
                'state': '0',
                'taxAmount': 0,
                'taxRate': 0,
                'totalAmount': 0,
                'workId': '',
                'projectDescription': '',
            },
            showBaseCurName: false,
            moneyList: [], //币种
            orgId: '', //机构id
            orgName: '', //机构名称
            isSkip: false, //是否跳转
            //验证
            rules: {
                planDate: [
                    { required: true, message: '请选择计划日期', trigger: 'change' },
                ],
                // taxRate: [
                //     {  required: true, message: '请填写税率', trigger: 'change' }
                // ],
                purchaseType: [
                    {
                        required: true,
                        message: '请至少选择一个采购方式',
                        trigger: 'change',
                    },
                ],
                currency: [
                    { required: true, message: '请至少选择一个币种', trigger: 'change' },
                ],
            },
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
            currencyForm: state => state.equip.equipData.currencyForm, //币种
            options: state => state.contract.ctClassify,
        }),
    },
    components: {},
    created () {
        try {
            let data = JSON.parse(localStorage.getItem('vuex'))
            this.formData.orgId = data.userInfo.orgInfo.orgId
            this.formData.orgName = data.userInfo.orgInfo.orgName
            this.formData.preparer = localStorage.getItem('userName')
            this.formData.preparerId = localStorage.getItem('userId')
            this.getinfo()
            this.geyDate()
        } catch (error) {
            alert(error.message)
        }
    },
    mounted () {},
    beforeDestroy () {},
    methods: {
        getinfo () {
            try {
                const { baseCyByOrgId } = this.userInfo
                this.formData.baseCurName = baseCyByOrgId.currencyName //本位币
                this.formData.baseCurId = baseCyByOrgId.currency
            } catch (error) {
                alert(error.message)
            }
        },

        //币种切换
        currencyChange (val) {
            this.formData.currency = this.currencyForm.find(
                x => x.value === val
            ).label //币种

            getRmbRate({
                //获取机构下某币种的人民币汇率
                currency: val,
                orgId: this.userInfo.orgInfo.orgId,
            })
                .then(res => {
                    console.log('res', res)
                    this.formData.rmbId = res.rateId
                    this.formData.rmbName = res.rate
                    this.formData.rmbRate = res.rate
                    if (res.rate === 1) {
                        this.formData.rmbRate = res.rate
                        this.formData.rmbId = res.currency
                    } else {
                        this.formData.rmbRate = res.rate
                        this.formData.rmbId = res.rateId
                    }
                })
                .catch(() => {})

            if (this.formData.currencyId === this.formData.baseCurId) {
                //币种=本位币
                this.formData.baseCurRate = 1
                this.showBaseCurName = false
            } else {
                this.formData.baseCurRate = null
                this.showBaseCurName = true
            }
        },
        //保存
        save (formName) {
            if(this.formData.planDate === '') {
                this.formData.planDate = this.geyDate()
            }
            this.$refs[formName].validate(valid => {
                if (valid) {
                    API.AddformData(this.formData).then(res => {
                        this.clientPop(
                            'suc',
                            '保存成功,是否继续',
                            () => {
                                this.$router.replace({
                                    path: '/materialsProcurementPlanEdit',
                                    query: {
                                        billid: res,
                                        name: 'goodsAndMaterials',
                                    },
                                })
                            },
                            this.cancel
                        )
                    })
                } else {
                    return false
                }
            })
        },

        //取消按钮
        cancel () {
            this.$router.replace('/materialsProcurementPlan')
        },
        //获取当前时间
        geyDate () {
            var myDate = new Date()
            let y = myDate.getFullYear()
            let m = myDate.getMonth() + 1
            let d = myDate.getDate()
            m = m < 10 ? '0' + m : m //小于10补0
            d = d < 10 ? '0' + d : d //小于10补0
            console.log('date', `${y}-${m}-${d}` )
            return `${y}-${m}-${d}`
        },
    },
}
</script>

<style lang="scss" scoped>
.buttons {
  left: 0;
}
.e-form {
  margin-bottom: 80px;
  padding: 0 20px;
  .tabs-title::before {
    content: "";
    height: 22px;
    width: 8px;
    border-radius: 40px;
    background-color: #2e61d7;
    display: block;
    position: absolute;
    left: 20px;
    margin-right: 20px;
  }
}

.e-table {
  background: #fff;
}

.el-tab-pane {
  margin-left: -10px;
}
</style>
